<template>
	<!-- 文章内容 -->
	<view class="grey_bg">

		<!-- 导航栏 -->
		<u-navbar :autoBack="true" :placeholder="true">
			<view slot="left" style="display: flex;">
				<u-icon name="arrow-left" class="u-navbar__content__left" size="20"></u-icon>
				<u-avatar v-if="showNavbar" @tap.stop="gotoUserHome()" size="28" :src="articleData.poster.avatar"></u-avatar>
				<view v-if="showNavbar" @tap.stop="gotoUserHome()" class="u-navbar__content__title navbar_title">{{articleData.poster.displayName}}</view>
				<view v-if="!showNavbar">帖子</view>
			</view>
		</u-navbar>

		<view style="height: 1px;"></view>

		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" :down="downOptions" :up="upOptions"
					 @up="upBack" @down="downBack" >


			<view style="background-color: #FFFFFF;padding: 10px 25upx;margin-bottom: 6px;">
				<!-- 发帖人信息 -->
				<poster-info id="user_info" :data="articleData"></poster-info>

				<!-- 内容 -->
				<text class="article_content">{{articleData.content}}</text>


				<!-- 图片、视频 -->
				<FileList ref="aFileList" :dataList="articleData.fileList" @video_play="videoPlayBack"></FileList>


				<!-- 底部的点赞、评论、分享 -->
				<footer-info :data="articleData" style="margin-top: 10px;"></footer-info>
			</view>




			<!-- 如果存在 分类 显示 -->
			<view class="category_box" @click="gotoTopic()">
				<image class="category_photo" mode="aspectFill" :src="articleData.topicInfo.cover"></image>
				<view class="category_info">
					<text class="category_title">{{articleData.topicInfo.name}}</text>
					<text class="category_des">{{articleData.topicInfo.memberCount}}人参与</text>
				</view>

				<view class="category_right">
					<u-button plain shape='circle' size="mini" type="primary" text="进入"></u-button>
				</view>
			</view>



			<!-- 评论列表 -->
			<CommentList ref="comment_list" :articleId="articleData.id" @listReply="replyClickBack"
						@scrollSuccessEnd="scrollSuccess" @scrollErrEnd="scrollErr" @showCommentMore=""
						@video_play="videoPlayBack">
			</CommentList>

		</mescroll-body>



		<view style="height: 51px;"></view>


		<!-- 底部回复输入框 -->
		<comment-input ref="commentInput" :articleId="articleData.id" @popupOpen="inputpopupOpen"
						@replySuccess="replySuccessBack" @video_play="videoPlayBack">
		</comment-input>

		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>


		<!-- 视频播放 -->
		<video-play ref="play"></video-play>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import PosterInfo from "@/components/article/posterInfo.vue";
	import FooterInfo from "@/components/article/footerInfo.vue";
	import FileList from "@/components/file/fileList.vue";
	import CommentList from "@/components/comment/commentList.vue";
	import commentInput from "@/components/comment/commentInput.vue";
	import VideoPlay from "@/components/file/videoPlay.vue";
	export default {
		components: {
			PosterInfo,
			FooterInfo,
			FileList,
			CommentList,
			commentInput,
			VideoPlay
		},
		mixins: [MescrollMixin],
		data() {
			return {
				downOptions: {
					use: true,
					// 不自动加载
					auto: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					// 空数据提示
					empty: {
						tip: '~ 空空如也 ~',
						btnText: '去看看'
					},
					toTop: {
						src: ''
					}
				},
				// 数据
				articleData:{
					id: '',
					createdDate: '',
					content: '',
					fileList: [],
					topicInfo: {},
					poster: {}
				},
				// 用户详情高度
				infoHeight: null,
				// 显示导航栏内容
				showNavbar: false,
				// 评论popu是否激活
				commentPopuState: false,
				// 评论输入popu是否激活
				inputPopuState: false,
				// 评论popu的评论输入popu是否激活
				// sonInputPopuState: false,
			}
		},
		onLoad(option) {
			this.articleData.id = option.id
			this.getArticleInfo()

			this.$nextTick(() => {
				// 获取评论
				this.$refs.comment_list.initData()
				// 获取用户信息的高度
				uni.createSelectorQuery().in(this).select("#user_info").boundingClientRect(data => {
					this.infoHeight = data.height + 4
				}).exec()
			})
		},

		// 手机返回事件监听
		onBackPress: function(e) {
			// 真机返回按钮或滑动返回触发，检查popu是否激活，若激活，关闭popu
			if (e.from == "backbutton") {
				if (this.inputPopuState) {
					// 输入框是否弹出
					this.$refs.popupClose.close()
					this.inputPopuState = false
					// 不允许返回
					return true
				} else if (this.commentPopuState) {
					// 更多评论是否弹出
					this.$refs.comment_list.closeCommentMore()
					this.commentPopuState = false
					// 不允许返回
					return true
				} else {
					// 允许返回
					return false
				}
			}
		},
		methods: {
			// 页面的滚动事件
			onPageScroll(e) {
				let d = Math.ceil(e.scrollTop) < this.infoHeight
				this.showNavbar = !d
				this.$nextTick(()=>{
					this.$refs.commentInput.componentBulr()
				})
			},
			// 播放视频
			videoPlayBack(url){
				this.$nextTick(()=>{
					this.$refs.play.initPlay(url)
				})
			},
			// 获取文章详情
			getArticleInfo(){
				this.$httpApi.baseArticleGet('open/article/info/'+this.articleData.id,{}).then(({ data }) => {
					if (data.code == "000000") {
						this.articleData =  data.data
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
				})
			},
			// 前往详情
			gotoUserHome() {
				uni.navigateTo({
					url: '/pages/center/homePage?id='+this.articleData.poster.username
				})
			},
			// 前往话题
			gotoTopic(){
				if (this.articleData.topicInfo.id){
					uni.navigateTo({
						url: '/pages/topic/topicDetail?id='+this.articleData.topicInfo.id
					});
				}
			},
			// 下拉刷新
			downBack(page) {
				this.getArticleInfo();
				this.$nextTick(() => {
					// 获取评论
					this.$refs.comment_list.initData()
				})
			},
			//上拉加载
			upBack(page) {
				this.$nextTick(() => {
					// 获取评论
					this.$refs.comment_list.getMoreList()
				})
			},
			// 评论成功
			replySuccessBack(){
				this.$nextTick(() => {
					// 获取评论
					this.$refs.comment_list.getCommentList()
				})
			},
			// 刷新成功
			scrollSuccess(size,noMore){
				this.mescroll.endSuccess(size,noMore);
			},
			// 刷新失败
			scrollErr(){
				this.mescroll.endErr()
			},
			// 回复按钮点击
			replyClickBack(val){
				this.$refs.commentInput.replyUser(val)
			},
			// 查看更多评论打开
			commentMore(val) {
				this.commentPopuState = val
			},
			// 输入框弹出层显示状态
			inputpopupOpen(val) {
				this.inputPopuState = val
			},
			// 更多评论弹出层的输入框弹出层
			sonInputPopuOpen(val){
				this.sonInputPopuState = val
			},


		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs__wrapper__nav__item {
		padding: 4px !important;
	}

	::v-deep .u-navbar__content__left {
		padding: 0 13px 0 3px !important;
	}

	::v-deep .u-navbar__content__title {
		text-align: left !important;
	}
	.navbar_title{
		color: #999999;
		margin-left: 1px;
		width: 450rpx;
		line-height: 28px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	
	


	// 话题
	.category_box {
		display: flex;
		flex: 1;
		flex-direction: row;
		margin: 5px 0;
		background-color: #FFFFFF;
		padding: 10px;
		margin: 2px 0px;
	}

	.category_photo {
		width: 40px;
		height: 40px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.category_info {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.category_title {
		font-size: 14px;
	}

	.category_des {
		font-size: 13px;
		color: #999999;
	}

	.category_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
